<html>
<head>
	<title>透析助手</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.6/css/sm.min.css">
	<link rel="stylesheet" href="__PUBLIC__/css/swiper.css">
	<link rel="stylesheet" href="__PUBLIC__/css/style.css">
	<link rel="stylesheet" href="__PUBLIC__/css/5s.css">
	<link rel="stylesheet" href="__PUBLIC__/css/6m.css">
	<link rel="stylesheet" href="__PUBLIC__/css/iconfont.css">
    <style type="text/css">
        .BtnGroup .btn-submit{background-color:#aaa;}
        .BtnGroup .btn-submit.active{background-color:#0068b6;}
    </style>
</head>
<body>
	<div class="head head-another">
		<div class="HeadContent">
			<a href="javascript:void(0);" class="back"><i class="iconfont">&#xe605;</i></a>
			<div class="HeadTitleMiddle">新用户资料完善</div>
		</div>
	</div>
	<div class="RecordInformation-public">
		<div>
			<div class="RegisterTitle">姓名</div>
			<div class="RegisterContent FullWidth">
				<input type="text" id="name" value="<{$vo.name}>" placeholder="请输入您的姓名" />
			</div>
		</div>
		<div>
			<div class="RegisterTitle">年龄</div>
			<div class="RegisterContent FullWidth">
				<input type="text" id="age" value="<{$vo.age}>" placeholder="请输入您的年龄" />
			</div>
		</div>
		<div class="SelectContent">
			<span id="citySpan" data-id="<{$vo.city_id}>" onclick="showCitys(this)"><{:$vo['city_id']?$vo['city_name']:'透析所在城市'}></span>
			<i class="iconfont" onclick="showCitys(this)">&#xe601;</i>
			<div class="OptionContent">
				<div class="swiper-container">
					<div class="swiper-wrapper">
                        <foreach name="cityArr" item="v">
                            <div class="swiper-slide" data-id="<{$v.id}>" onclick="chooseCity(this)"><span><{$v.name}></span></div>
                        </foreach>
					</div>
				</div>
			</div>
		</div>
        <script type="text/javascript">
        </script>
		<div class="SelectContent">
			<span id="hptSpan" data-id="<{$vo.hpt_id}>" onclick="showHpt(this)"><{:$vo['hpt_id']?$vo['hpt_name']:'透析中心/医院'}></span>
			<i class="iconfont" onclick="showHpt(this)">&#xe601;</i>
			<div class="OptionContent hospital">
				<div class="swiper-container">
					<div class="swiper-wrapper" id="htpDiv">
					</div>
				</div>
			</div>
		</div>

		<div class="RegisterNotice">
			<div class="RegisterNotice-left">
				<label class="form-checkbox">
                    <i class="iconfont">&#xe610;</i>
					<!-- <input type="checkbox" checked /> -->
				</label>
			</div>
			<div class="RegisterNotice-right">
				我同意透析助手的<a href="javascript:;">条款</a>以及<a href="javascript:;">隐私政策</a>。特此同意接受来自透析助手及其合作伙伴的通知。
			</div>
		</div>
	</div>

	<div class="BtnGroup NoFixed">
		<button class="AddRecord btn-submit" id="subBtn" data-status="0">立即关联</button>
		<div class="SmallText">
			透析助手了解保护您个人咨询的重要性，并致力保护您的资料安全。
		</div>
	</div>
<script type='text/javascript' src='__PUBLIC__/js/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='__PUBLIC__/js/swiper.min.js'></script>
<script type='text/javascript' src='__PUBLIC__/js/myjq.js'></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        slidesPerView : 'auto',
        direction : 'vertical',
        freeMode : true,
        freeModeSticky : true,
    })
    
    $(function(){
        $('#subBtn').click(function(){
            if($(this).attr('data-status')=='0') return;
            if($('#name').val()==''){
                toast('请输入您的姓名');return;
            }
            if(!isNumber($('#age').val())){
                toast('请输入年龄数值');return;
            }
            if($('#citySpan').attr('data-id')==''){
                toast('请选择城市');return;
            }
            var hpt_id = $('#hptSpan').attr('data-id');//医院id
            if(hpt_id==''){
                toast('请选择透析中心');return;
            }
            loadingShow();
            $.post('<{:U("complete")}>',
                {id:'<{$uid}>',name:$('#name').val(),age:$('#age').val(),
                city_id:$('#citySpan').attr('data-id'),hpt_id:hpt_id},
                function(res){
                    loadingHide();
                    if(res=='suc'){
                        if(hpt_id == '1'){
                            location.href="<{:U('Index/index')}>";
                        }else{
                            location.href="<{:U('idcard')}>";
                        }
                    }else{
                        toast("关联失败");
                    }
                },
            'json');
        });
        
        //修改时
        if('<{$vo.name}>'){
            //$('#citySpan').text('<{$vo.city_name}>').attr('data-id','<{$vo.city_id}>');
            //加载透析中心
            $.post("<{:U('Public/getHpt')}>",{cid:'<{$vo.city_id}>'},function(res){
                var hptStr = '<div class="swiper-slide" data-id="1" onclick="chooseHpt(this)"><span>默认透析中心</span><br><b>(如未找到您的透析中心/医院请选此项)</b></div>';
                if(res!='err'){
                    $.each(res,function(i,item){
                        hptStr += '<div class="swiper-slide" data-id="'+item.id+'" onclick="chooseHpt(this)"><span>'+item.name+'</span><br><b>(需要通过身份绑定认证)</b></div>';
                    });
                }
                $('#htpDiv').html(hptStr);
                
                mySwiper = new Swiper('.swiper-container', {
                    slidesPerView : 'auto',
                    direction : 'vertical',
                    freeMode : true,
                    freeModeSticky : true,
                });
    
            },'json');
        }
    })
    
    //显示城市列表
    function showCitys(obj){
        if ($(obj).siblings(".OptionContent").height() == 0) {
            $(".OptionContent").height(0);
            $(".SelectContent").children("i").html("&#xe601;");
            $(obj).siblings(".OptionContent").animate({
                "height" : "9.6rem"
            }, 200);
            $(obj).parents(".SelectContent").children("i").html("&#xe600;");
        } else {
            $(obj).siblings(".OptionContent").animate({
                "height" : "0"
            }, 200);
            $(obj).parents(".SelectContent").children("i").html("&#xe601;");
        }
    }
    
    //显示城市列表
    function showHpt(obj){
        if ($(obj).siblings(".OptionContent").height() == 0) {
            $(".OptionContent").height(0);
            $(".SelectContent").children("i").html("&#xe601;");
            $(obj).siblings(".OptionContent").animate({
                "height" : "9.6rem"
            }, 200);
            $(obj).parents(".SelectContent").children("i").html("&#xe600;");
        } else {
            $(obj).siblings(".OptionContent").animate({
                "height" : "0"
            }, 200);
            $(obj).parents(".SelectContent").children("i").html("&#xe601;");
        }
    }
    
    //选择城市
    function chooseCity(obj){
        var city_name = $(obj).children("span").html();
        $(obj).siblings().css({
            "background-color" : "#fff",
            "color" : "#333"
        });
        $(obj).css({
            "background-color" : "#0168b7",
            "color" : "#fff"
        });
        $(obj).parents(".OptionContent").animate({"height" : "0"}, 200);
        $(obj).parents(".OptionContent").siblings("span").text(city_name).attr('data-id',$(obj).attr('data-id'));
        $(obj).parents(".OptionContent").siblings("i").html("&#xe601;");
        //加载透析中心
        $.post("<{:U('Public/getHpt')}>",{cid:$(obj).attr('data-id')},function(res){
            //医院初始化
            $('#hptSpan').attr('data-id','').text('透析中心/医院');
            
            var hptStr = '<div class="swiper-slide" data-id="1" onclick="chooseHpt(this)"><span>默认透析中心</span><br><b>(如未找到您的透析中心/医院请选此项)</b></div>';
            if(res!='err'){
                $.each(res,function(i,item){
                    hptStr += '<div class="swiper-slide" data-id="'+item.id+'" onclick="chooseHpt(this)"><span>'+item.name+'</span><br><b>(需要通过身份绑定认证)</b></div>';
                });
            }
            $('#htpDiv').html(hptStr);
                
            mySwiper = new Swiper('.swiper-container', {
                slidesPerView : 'auto',
                direction : 'vertical',
                freeMode : true,
                freeModeSticky : true,
            });
                
        },'json');
    }
    
    //选择医院
    function chooseHpt(obj){
        var city_name = $(obj).children("span").html();
        $(obj).siblings().css({
            "background-color" : "#fff",
            "color" : "#333"
        });
        $(obj).css({
            "background-color" : "#0168b7",
            "color" : "#fff"
        });
        $(obj).parents(".OptionContent").animate({"height" : "0"}, 200);
        $(obj).parents(".OptionContent").siblings("span").text(city_name).attr('data-id',$(obj).attr('data-id'));
        $(obj).parents(".OptionContent").siblings("i").html("&#xe601;");
    }
    
    //条款隐私点击事件
    $('.form-checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            $('#subBtn').removeClass('active').attr('data-status','0');
        }else{
            $(this).addClass('active');
            $('#subBtn').addClass('active').attr('data-status','1');
        }
    });
</script>
</body>
</html>